<template>
  <div class="map">
    <div id="mapContainer"></div>
    <div class="addfield" @click="marker">智慧田块</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      map: undefined,
      iscity: false,
      isdistrict: false,
      atPresentCity: '河北省',
      atPresentDistrict: '县/区',
      city: [{
        name: '河北省',
        value: 130000
      },{
        name: '承德市',
        value: 130800
      },{
        name: '衡水市',
        value: 131100
      },{
        name: '唐山市',
        value: 130200
      },{
        name: '张家口市',
        value: 130700
      },{
        name: '秦皇岛市',
        value: 130300
      },{
        name: '廊坊市',
        value: 131000
      },{
        name: '保定市',
        value: 130600
      },{
        name: '石家庄市',
        value: 130100
      },{
        name: '邢台市',
        value: 130500
      },{
        name: '沧州市',
        value: 130900
      },{
        name: '邯郸市',
        value: 130400
      }],
      district: [{
        name: '安平县',
        value: 131125
      },{
        name: '饶阳县',
        value: 131124
      },{
        name: '深州市',
        value: 131182
      },{
        name: '武强县',
        value: 131123
      },{
        name: '桃城区',
        value: 131102
      },{
        name: '武邑县',
        value: 131122
      },{
        name: '阜城县',
        value: 131128
      },{
        name: '景县',
        value: 131127
      },{
        name: '故城县',
        value: 131126
      },{
        name: '枣强县',
        value: 131121
      },{
        name: '冀州区',
        value: 131103
      }
      ],
      markers:[],
      markers2:[],
      ismarker: false,
    };
  },

  mounted() {
    this.addMap();
    this.addDisProvince();
    this.addPolygon();
  },

  methods: {
    addMap(){
      this.map = new AMap.Map("mapContainer", {
        center: [116.433322, 39.900256],
        zoom: 7,
        zooms: [6, 16],
        resizeEnable: true,
        viewMode: "3D",
        features: ['bg', 'road'],
      });
      //添加卫星地图
      this.map.setLayers([new AMap.TileLayer.Satellite()]);
    },
    addDisProvince() {
      let that = this;
      // 创建省份图层
      var disProvince;
      function initPro(code,dep) {
        dep = typeof dep == 'undefined' ? 2 : dep;

        disProvince && disProvince.setMap(null);
        disProvince = new AMap.DistrictLayer.Province({
          zIndex: 12,
          adcode: [code],
          depth: dep,
          styles: {
            fill: function (properties) {
              var adcode = properties.adcode;
              return getColorByAdcode(adcode);
            },
            "province-stroke": "cornflowerblue",
            "city-stroke": "white", // 中国地级市边界
            "county-stroke": "rgba(255,255,255,0.5)", // 中国区县边界
            'coastline-stroke':'#0088ff',
          },
        });
        disProvince.setMap(that.map);
        that.disProvince = disProvince;
      }
      // 颜色辅助方法
      var colors = {};
      var getColorByAdcode = function (adcode) {
        if (!colors[adcode]) {
          var gb = Math.random() * 155 + 50;
          colors[adcode] = "rgba(" + gb + "," + gb + ",255,0.5)";
        }

        return colors[adcode];
      };

      initPro(130000,1);

      that.map.on("click", function (ev) {
        console.log(ev);
        var px = ev.pixel;
        // 拾取所在位置的行政区
        var props = disProvince.getDistrictByContainerPos(px);
        console.log(props);
        if (props) {
          var SOC = props.SOC;
          if (SOC) {
            // 重置行政区样式
            initPro(props.adcode,2);
            that.map.panTo([ev.lnglat.getLng(), ev.lnglat.getLat()]);
            if (props.level == 'city') {
              that.map.setZoom(8);
              if (that.ismarker) {
                that.map.remove(that.markers);
                that.addMarker2();
              }
            } else if(props.level == 'district') {
              that.map.setZoom(10);
              if (that.ismarker) {
                that.map.remove(that.markers2);
              }
            }
            // map.setCity(props.NAME_CHN);
          }
        }
      });
    },
    
    addMarker() {
      var marker1 = new AMap.Marker({
          position: [117.60885915443299,41.23134843363463],
          // 将 html 传给 content
          content: `
          <div class="markerstyle2">
            <div class="ranking">
              <span class="num">50</span>
              <span class="text">个</span>
            </div>
          </div>`,
          // 以 icon 的 [center bottom] 为原点
          offset: new AMap.Pixel(-57, -156)
      });
      var marker2 = new AMap.Marker({
          position: [115.2467985163629,40.8086132013518],
          // 将 html 传给 content
          content: `
           <div class="markerstyle2">
            <div class="ranking">
              <span class="num">50</span>
              <span class="text">个</span>
            </div>
          </div>`,
          // 以 icon 的 [center bottom] 为原点
          offset: new AMap.Pixel(-57, -156)
      });
      var marker3 = new AMap.Marker({
          position: [114.48874184623361,38.189625837137164],
          // 将 html 传给 content
          content: `
           <div class="markerstyle2">
            <div class="ranking">
              <span class="num">50</span>
              <span class="text">个</span>
            </div>
          </div>`,
          // 以 icon 的 [center bottom] 为原点
          offset: new AMap.Pixel(-57, -156)
      });
      var marker4 = new AMap.Marker({
          position: [118.34494316697123,39.693451734925816],
          // 将 html 传给 content
          content: `
           <div class="markerstyle2">
            <div class="ranking">
              <span class="num">50</span>
              <span class="text">个</span>
            </div>
          </div>`,
          // 以 icon 的 [center bottom] 为原点
          offset: new AMap.Pixel(-57, -156)
      });
      var marker5 = new AMap.Marker({
          position: [116.65683571502564,39.24109204134097],
          // 将 html 传给 content
          content: `
           <div class="markerstyle2">
            <div class="ranking">
              <span class="num">50</span>
              <span class="text">个</span>
            </div>
          </div>`,
          // 以 icon 的 [center bottom] 为原点
          offset: new AMap.Pixel(-57, -156)
      });
      var marker6 = new AMap.Marker({
          position: [117.00790657281874,38.116511149225786],
          // 将 html 传给 content
          content: `
           <div class="markerstyle2">
            <div class="ranking">
              <span class="num">50</span>
              <span class="text">个</span>
            </div>
          </div>`,
          // 以 icon 的 [center bottom] 为原点
          offset: new AMap.Pixel(-57, -156)
      });
      var marker7 = new AMap.Marker({
          position: [114.74410483315586,37.28319906692025],
          // 将 html 传给 content
          content: `
           <div class="markerstyle2">
            <div class="ranking">
              <span class="num">50</span>
              <span class="text">个</span>
            </div>
          </div>`,
          // 以 icon 的 [center bottom] 为原点
          offset: new AMap.Pixel(-57, -156)
      });
      this.markers.push(marker1,marker2,marker3,marker4,marker5,marker6,marker7);
      let markers = this.markers;
      // 将 markers 添加到地图
      this.map.add(markers);
    },
    addMarker2() {
      var marker1 = new AMap.Marker({
          position: [115.63130996122959,37.892147099904555],
          // 将 html 传给 content
          content: `
           <div class="markerstyle2">
            <div class="ranking">
              <span class="num">50</span>
              <span class="text">个</span>
            </div>
          </div>`,
          // 以 icon 的 [center bottom] 为原点
          offset: new AMap.Pixel(-57, -156)
      });
      var marker2 = new AMap.Marker({
          position: [115.64143296673893,37.3656609593741],
          // 将 html 传给 content
          content: `
            <div class="markerstyle2">
            <div class="ranking">
              <span class="num">50</span>
              <span class="text">个</span>
            </div>
          </div>`,
          // 以 icon 的 [center bottom] 为原点
          offset: new AMap.Pixel(-57, -156)
      });
      var marker3 = new AMap.Marker({
          position: [116.07064836546778,37.39944464521582],
          // 将 html 传给 content
          content: `
           <div class="markerstyle2">
            <div class="ranking">
              <span class="num">50</span>
              <span class="text">个</span>
            </div>
          </div>`,
          // 以 icon 的 [center bottom] 为原点
          offset: new AMap.Pixel(-57, -156)
      });
      var marker4 = new AMap.Marker({
          position: [116.09291897490618,37.731639914581564],
          // 将 html 传给 content
          content: `
           <div class="markerstyle2">
            <div class="ranking">
              <span class="num">50</span>
              <span class="text">个</span>
            </div>
          </div>`,
          // 以 icon 的 [center bottom] 为原点
          offset: new AMap.Pixel(-57, -156)
      });
      var marker5 = new AMap.Marker({
          position: [115.92892629906538,37.81165802039639],
          // 将 html 传给 content
          content: `
           <div class="markerstyle2">
            <div class="ranking">
              <span class="num">50</span>
              <span class="text">个</span>
            </div>
          </div>`,
          // 以 icon 的 [center bottom] 为原点
          offset: new AMap.Pixel(-57, -156)
      });
      this.markers2.push(marker1,marker2,marker3,marker4,marker5);
      let markers = this.markers2;
      // 将 markers 添加到地图
      this.map.add(markers);
    },

    addPolygon() {
      let that = this
      let path1 = [
        [115.7247758057714,37.8504576737022],
        [115.72340251475578,37.84647589100972],
        [115.73069812327628,37.846187838815574],
        [115.72962523967027,37.85052544686567],
        [115.7258486893773,37.85183006812023],
        [115.7240462449193,37.85166063809282],
        [115.72361709147691,37.850542390146806]
      ]
      let path2 = [
        [115.71805955439805,37.84922080252629],
        [115.71672917872667,37.84351059400912],
        [115.72078467875724,37.84344281439814],
        [115.72108508616685,37.8468994951335],
        [115.7192397263646,37.84927163325742]
      ]

      var polygon1 = new AMap.Polygon({
          path: path1,
          strokeColor: "#00F6EF", 
          strokeWeight: 2,
          strokeOpacity: 1,
          strokeStyle: 'dashed',
          fillOpacity: 0.4,
          fillColor: '#125186',
          zIndex: 1000,
      })
      var polygon2 = new AMap.Polygon({
          path: path2,
          strokeColor: "#00F6EF", 
          strokeWeight: 2,
          strokeOpacity: 1,
          strokeStyle: 'dashed',
          fillOpacity: 0.4,
          fillColor: '#125186',
          zIndex: 1000,
      })
      this.map.add([polygon1,polygon2])
      polygon1.on('click',()=>{
        that.disProvince.setMap(null);
        that.map.setFitView([polygon1,polygon2]);
        setTimeout(() => {
          that.$router.push('/vtour')
        }, 1000);
      })
      polygon2.on('click',()=>{
        that.disProvince.setMap(null);
        that.map.setFitView([polygon1,polygon2]);
        setTimeout(() => {
          that.$router.push('/vtour')
        }, 1000);
      })
    },

    showcity() {
      this.iscity = !this.iscity;
    },
    showdistrict() {
      this.isdistrict = !this.isdistrict;
    },
    goadcode(iss,item,dep) {
      let that = this;
      let deps = dep
      if (item.name == '河北省') {
        deps = 1
      }
      this.map.setCity(item.name);

      function initPro(code,dep) {
        that.disProvince.setMap(null);
        that.disProvince = new AMap.DistrictLayer.Province({
          zIndex: 12,
          adcode: [code],
          depth: dep,
          styles: {
            fill: function (properties) {
              var adcode = properties.adcode;
              return getColorByAdcode(adcode);
            },
            "province-stroke": "cornflowerblue",
            "city-stroke": "white", // 中国地级市边界
            "county-stroke": "rgba(255,255,255,0.5)", // 中国区县边界
            'nation-stroke':'#ff0000',
            'coastline-stroke':'#0088ff',
          },
        });
        that.disProvince.setMap(that.map);
      }
      initPro(item.value,deps);
      var colors = {};
      var getColorByAdcode = function (adcode) {
        if (!colors[adcode]) {
          var gb = Math.random() * 155 + 50;
          colors[adcode] = "rgba(" + gb + "," + gb + ",255,0.5)";
        }

        return colors[adcode];
      };
      
      that.map.on("click", function (ev) {
        // console.log(ev);
        var px = ev.pixel;
        // 拾取所在位置的行政区
        var props = that.disProvince.getDistrictByContainerPos(px);
        console.log(props);
        if (props) {
          var SOC = props.SOC;
          if (SOC) {
            // 重置行政区样式
            initPro(props.adcode,2);
            that.map.panTo([ev.lnglat.getLng(), ev.lnglat.getLat()]);
            if (props.level == 'city') {
              that.map.setZoom(8);
              that.map.remove(that.markers);
              that.addMarker2();
            } else if(props.level == 'district') {
              that.map.setZoom(10);
              that.map.remove(that.markers2);
            }
            // map.setCity(props.NAME_CHN);
          }
        }
      });

      if (iss == 'city') {
        this.atPresentCity = item.name;
        that.map.remove(that.markers);
        that.addMarker2();
      } else if(iss == 'district') {
        this.atPresentDistrict = item.name
        that.map.remove(that.markers2);
      }
      this.iscity = false;
      this.isdistrict = false;
    },
    marker() {
      if (!this.ismarker) {
        this.addMarker();
        this.ismarker = true
      } else {
        this.map.remove(this.markers)
        this.ismarker = false
      }
    }
  },
  beforeDestroy() {
    this.map.destroy();
  }
};
</script>

<style lang="scss" scoped>
::v-deep {
  .amap-logo {
    display: none !important;
  }
  .amap-copyright {
    display: none !important;
  }
}
.map {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  #mapContainer {
    width: 100%;
    height: 100%;
  }
  .selectMap {
    position: absolute;
    top: 114px;
    left: 458px;
    font-size: 24px;
    z-index: 4;
    font-family: ysbt;
    display: flex;
    .icons {
      width: 34px;
      height: 34px;
      background: url(~assets/images/mapico.png);
      background-size: 100% 100%;
    }
    .atPresent {
      line-height: 34px;
      background: url(~assets/images/selbg.png);
      background-size: 100% 100%;
      width: 137px;
      padding-left: 20px;
      cursor: pointer;
      text-shadow: 0 0 10px #1862b4,0 0 20px #fff;
      .down {
        float: right;
        margin-top: 3px;
        margin-right: 10px;
      }
    }
    .cityUl {
      width: 137px;
      height: 300px;
      overflow: auto;
      li {
        line-height: 30px;
        padding-left: 20px;
        margin-top: 5px;
        background: linear-gradient(to top,rgba(1, 34, 72, 1) 10%,rgba(1, 34, 72,0.4));
        cursor: pointer;
        border: 1px solid rgba(1, 34, 72,0);
        &:hover {
          border: 1px solid #70DCFB;
          text-shadow: 0 0 10px #1862b4,0 0 20px #fff;
        }
      }
    }
    .district {
      margin-left: 8px;
    }
  }
  .addfield {
    position: absolute;
    right: 500px;
    bottom: 60px;
    width: 106px;
    height: 32px;
    background: url(~assets/images/mapbtn.png) no-repeat;
    background-size: 100%;
    line-height: 32px;
    text-align: right;
    font-size: 16px;
    padding-right: 10px;
    cursor: pointer;
  }
}

.slide-fade-enter-active {
  transition: all .3s ease;
}
.slide-fade-leave-active {
  transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
  transform: translateY(-10px);
  opacity: 0;
}
</style>